<template>
  <view class="container">
    <view class="container-header">
      <view class="header-goodsImg">
        <image :src="img" mode="aspectFill" />
      </view>
      <view class="header-message">
        <view>
          <text class="title">运输中</text>
          <view class="copy-text" @click="copyLogisticsNo(logisticsNo)">复制快递单号</view>
        </view>
        <view>订单编号：{{ orderNo||'' }}</view>
        <view>
          <text v-if="logisticsWay != 0">{{ fastMailName }}：{{ logisticsNo ||'' }}</text>
          <text v-else>自取</text>
          <text>共{{ numbers }}件商品</text>
        </view>
      </view>
    </view>
    <view class="container-content">
      <u-steps current="0" direction="column">
        <u-steps-item  :desc="item.ftime"  v-for="(item, index) in stepsList" :key="index" :title="item.context">
        </u-steps-item>
      </u-steps>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      autoplay: true,
      duration: 500,
      interval: 5000,
      goodsList: [],
      stepsList: [],
      orderId: '',
      fastMailName: '',
			img:'',
			logisticsNo:'',
			orderNo:'',
			logisticsWay:'',
			numbers:''
			
    }
  },
  onLoad(options) {
    const { orderId, logisticsNo, orderNo, logisticsWay } = options;
    // this.goodsList = list
		console.log(options)
    this.orderId = orderId
    this.logisticsNo = logisticsNo
    this.orderNo = orderNo
    this.logisticsWay = logisticsWay
    this.getlogisticsList();
    this.getFastMailName(logisticsWay);
		this.init()
  },

  methods: {
		async init() {
			let {
				orderId
			} = this
			let result = await this.$request.miniOrderDetail({
				orderId
			})
			this.img = result.data.orderProductDTOList[0].thumbnail
			this.numbers = result.data.number
		},
    //获取快递公司名字
    getFastMailName(logisticsWay) {
      if (logisticsWay != 0) {
        let str = ''
        switch (logisticsWay) {
          case 'yuantong': str = '圆通速递'; break;
          case 'yunda': str = '韵达快递'; break;
          case 'zhongtong': str = '中通快递'; break;
          case 'shentong': str = '申通快递'; break;
          case 'jtexpress': str = '极兔快递'; break;
          case 'shunfeng': str = '顺丰快递'; break;
          case 'ems': str = 'EMS'; break;
          case 'jd': str = '京东快递'; break;
          case 'debangkuaidi': str = '德邦快递'; break;
          case 'shunfengkuaiyun': str = '顺丰快运'; break;
          case 'subida': str = '速必达'; break;
          case 'huitongkuaidi': str = '百世快递'; break;
          default:
            break;
        }
        this.fastMailName = str
      }
    },

    async getlogisticsList() {
      const { orderId } = this;
      let result = await this.$request.miniLogistics({ orderId })
      result.data.map(item => {
        item.iconName = 'server'
      })
      this.stepsList = result.data
    },

    //复制
    copyLogisticsNo(text) {
      uni.setClipboardData({
        data: text,
        success: function (res) {
          this.$toast('复制成功')
        }
      });
    },
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: scroll;
  font-family: PingFang SC-Regular, PingFang SC;
}

.container::-webkit-scrollbar {
  width: 0;
}
.container-content{
  padding: 24rpx;
}

.container-header {
  width: 100%;
  display: flex;
  padding: 24rpx;
  border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
  font-size: 24rpx;
  color: #666;
  margin-bottom: 24rpx;
}

.header-goodsImg {
  width: 128rpx;
  height: 128rpx;
  display: block;
  margin-right: 24rpx;
}

.header-goodsImg image {
  width: 100%;
  height: 100%;
  display: block;
}

.header-message {
  flex: 1;
}

.header-message,
.header-message>view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header-message>view {
  flex-direction: row;
}

.header-message .title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.copy-text {
  width: 150rpx;
  line-height: 35rpx;
  text-align: center;
  border-radius: 20rpx;
  opacity: 1;
  border: 1rpx solid #999999;
  font-size: 20rpx;
  color: #999;
}

.t-steps-item__title--process {
  color: #333 !important;
}

.t-steps-item__dot--process {
  border-color: #3EB89E !important;
}
</style>